<template>
	<div class="login-body">
		<div class="login-container">
			<div class="head">
				<img class="logo" src="../assets/login-logo-2.png" />
				<div class="name">
					<div class="title">先锋商城</div>
					<div class="tips">后台管理系统</div>
				</div>
			</div>
			<el-form label-position="top" :rules="rules" :model="ruleForm" ref="loginForm" class="login-form">
				<el-form-item label="账号" prop="username">
					<el-input type="text" v-model.trim="ruleForm.username" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model.trim="ruleForm.password" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item>
					<div style="color: #333">登录表示您已同意<a>《服务条款》</a></div>
					<el-button style="width: 100%" type="primary" @click="submitForm">立即登录</el-button>
					<el-checkbox v-model="checked" @change="!checked">下次自动登录</el-checkbox>
				</el-form-item>
			</el-form>
		</div>

		<!-- 遮罩层和滑动图片验证 -->
		<div class="mask" v-show="slideverify">
			<div class="slideContainer">
				<slide-verify ref="slideVerify" @success="onSuccess" @fail="onFail" @refresh="onRefresh" @fulfilled="onFulfilled"
					slider-text="向右滑动验证">
				</slide-verify>
				<div style="margin-top: 15px;">{{ text }}</div>
				<el-button @click="quxiao" style="float: right;">取消</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from '@/utils/axios';
	import md5 from 'js-md5';
	import {
		localSet
	} from '@/utils';

	export default {
		name: 'Login',
		data() {
			return {
				ruleForm: {
					username: '',
					password: ''
				},
				checked: true,
				rules: {
					username: [{
						required: 'true',
						message: '账户不能为空',
						trigger: 'blur'
					}],
					password: [{
						required: 'true',
						message: '密码不能为空',
						trigger: 'blur'
					}]
				},
				text: '',
				slideverify: false
			}
		},
		methods: {
			quxiao(){
				this.slideverify = false
			},
			submitForm() {
				if (this.ruleForm.username == "" || this.ruleForm.password == "") {
					this.slideverify = false
				} else {
					this.slideverify = true
					this.$refs.slideVerify.refresh();
				}
			},
			resetForm() {
				this.$refs.loginForm.value.resetFields()
			},

			onSuccess(times) {
				this.text = '验证通过，耗时 ' + (times / 1000).toFixed(1) + '秒'
				setTimeout(() => {
					this.slideverify = false
					this.$refs.loginForm.validate((valid) => {
						if (valid) {
							axios.post('/adminUser/login', {
								userName: this.ruleForm.username || '',
								passwordMd5: md5(this.ruleForm.password)
							}).then(res => {
								localSet('token', res)
								window.location.href = '/'
							})
						} else {
							return false
						}
					})
				}, 500);
			},
			onFail() {
				this.text = '验证失败'
			},
			onRefresh() {
				//点击刷新按钮
				this.text = ''
			},
			onFulfilled() {
				//验证失败自动刷新
				this.text = '重新验证'
			},

		}
		// setup () {
		//   const loginForm = ref(null)
		//   return {
		//     ...toRefs(state),
		//     loginForm,
		//     submitForm,
		//     resetForm
		//   }
		// }
	}
</script>

<style scoped>
	.login-body {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		background-color: #fff;
		/* background-image: linear-gradient(25deg, #077f7c, #3aa693, #5ecfaa, #7ffac2); */
	}

	.login-container {
		width: 420px;
		height: 500px;
		background-color: #fff;
		border-radius: 4px;
		box-shadow: 0px 21px 41px 0px rgba(0, 0, 0, 0.2);
	}

	.head {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40px 0 20px 0;
	}

	.head img {
		width: 100px;
		height: 100px;
		margin-right: 20px;
	}

	.head .title {
		font-size: 28px;
		color: #1BAEAE;
		font-weight: bold;
	}

	.head .tips {
		font-size: 12px;
		color: #999;
	}

	.login-form {
		width: 70%;
		margin: 0 auto;
	}

	/* 滑动验证 */
	.mask {
		position: fixed;
		left: 0%;
		top: 0%;
		width: 100%;
		height: 100%;
		z-index: 100;
		overflow: hidden;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.mask .slideContainer {
		position: absolute;
		left: 50%;
		top: 50%;
		background-color: rgb(255, 255, 255);
		transform: translate(-50%, -50%);
		padding: 15px;
	}
</style>
<style>
	.el-form--label-top .el-form-item__label {
		padding: 0;
	}

	.login-form .el-form-item {
		margin-bottom: 12px;
	}
</style>
